<template>
    <div class="bg-f2f3f5 leaveSpace">
        <div class="flex gap-20 justify-center max-w-1200 mar-x-auto pad-t-10 text-nowrap" style="min-height: calc(100vh - 81px)">
            <div class="left_navs flex-1 pos-s t-80 bg-white w-px-150 h-200 pad-10 border-rad-5">
                <div class="w-auto font-14 bg-f0f4ff border-rad-5 pad-10">
                    <router-link
                        to="/"
                        style="text-decoration: none; color: #1e9fff"
                    >
                        <span class="mar-r-10">&lt;</span>
                        <span>返回首页</span>
                    </router-link>
                </div>

                <div class="mar-t-10 color-333333 font-12">
                    <span>共搜到结果：</span>
                    <span class="color-ff0000"> {{ total }} </span>
                    <span>条</span>
                </div>
            </div>

            <div class="flex-6 bg-white border-rad-5 h100">
                <div class="flex font-16 align-center pad-x-20">
                    <div class="mar-y-10">搜索：</div>
                    <div class="mar-y-10">
                        <el-input v-model="currentKeyword" placeholder="请输入文章标题、摘要" size="small" clearable @change="handleSearch">
                            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
                        </el-input>
                    </div>
                </div>

                <Lines h="2px" w="100%" bg="#f2f3f5" />

                <ListContent v-if="!loading"
                    :articleLists="newArticleLists"
                    @goDetailPage="goDetailPage"
                />

                <el-empty v-if="!loading && newArticleLists.length === 0" :image-size="100"></el-empty>

                <div v-if="newArticleLists.length > 0 && !loading && total === newArticleLists.length" class="flex justify-center color-999999 pad-30 font-14">
                    <span>没有更多文章了~</span>
                </div>
            </div>

            <div class="right_navs flex-1 pos-s t-80 h-200 font-14">
				<div class="right_greet bg-white pad-20 border-rad-5">
					<div class="font-16 font-b-800">{{ greeting }}</div>
					<span class="color-8a919f">点亮在三人行社区的每一天！！！</span>
				</div>

				<div class="color-999999 pad-15">
					<a href="https://beian.miit.gov.cn/" target="blank">皖ICP 备:078564号-1</a>
					<div>
						<span>Copyright</span>
						<span class="font-16">©</span>
						<span>2025 三人行版权所有</span>
					</div>
				</div>
			</div>
        </div>

        <div class="footer flex flex-column justify-center align-center h-60 mar-t-10 pos-s b-0 font-12 color-999999 bg-white">
			<a href="https://beian.miit.gov.cn/" target="blank" class="text-nowrap">皖ICP 备:078564号-1</a>
			<div>Copyright © 2025 三人行版权所有</div>
		</div>
    </div>
</template>

<script>
	import Lines from '@/components/Lines/index'
	import ListContent from '@/components/ListContent/index'

    import { getGreeting } from '@/utils/lib'
    import { getArticleList } from '@/apis/article'

    export default {
        name: 'Search',

        components: {
            Lines,
            ListContent,
        },

        data() {
            return {
                currentKeyword: '', // 当前关键字
                loading: false, // 加载中
                classifyId: '', // 分类id
                pageSize: 3, // 每页显示条数
				total: 0, // 总数
                currentPage: 1, // 当前页码
                newArticleLists: [], // 新的文章列表
                greeting: '', // 问候语
            }
        },

        mounted() {
            if (this.$route.params && this.$route.params.keyword) {
                this.currentKeyword = this.$route.params.keyword
                this.findArticleList()
            }

            this.updateGreeting()
        },

        methods: {
            // 更新问候语
			updateGreeting() {
				this.greeting = getGreeting()
			},

            // 搜索
            handleSearch() {
                this.newArticleLists = []
                this.findArticleList()
            },

            // 获取参数
            getQuerys() {
                let params = {
                    keyword: this.currentKeyword,
					classifyId: this.classifyId,
				}

                return params
            },

            // 查询文章列表接口
			findArticleList() {
                this.loading = true

				getArticleList(this.getQuerys()).then(res => {
                    this.loading = false
                    if (res.code === 200) {
                        let data = res.data.rows
						data.forEach(item => item.isHideCoverImg = false)
                        this.newArticleLists = data
						this.total = res.data.total
                    }
				}).catch(err => {
                    this.loading = false
                })
			},

            // 跳转详情页
            goDetailPage(row) {
				this.$router.push({
					path: `/details`,
					query: { articleId: row.articleId, userId: row.userId }
				})
			},
        },


    }
</script>

<style lang="scss" scoped>    
    .list:hover {
        background-color: #f7f8fa;
    }

    .list { 
        transition-property: background-color, color;
		transition-duration: 0.2s;
    }
</style>

<style lang="scss" scoped>
    @media screen and (max-width: 750px) {
        .right_navs {
            display: none;
        }

        .left_navs {
            display: none;
        }

        .leaveSpace {
            padding-left: 0;
            padding-right: 0;
        }
    }

    @media screen and (min-width: 750px) {
        .footer {
            display: none;
        }

        .leaveSpace {
            padding-left: 10px;
            padding-right: 10px;
        }
    }

    .content {
        text-overflow: ellipsis;
	    overflow: hidden;
        width: 80%;
    }

    .title {
        text-overflow: ellipsis;
	    overflow: hidden;
        width: 90%;
    }
</style>